<!--  -->
<template>
  <div class="inputLine">
    <label :class="bindClass">{{ labelVal }}</label>
    <input type="text" v-model="mInputVal" @input="inputChange($event)" />
  </div>
</template>

<script>
export default {
  props: {
    bindClass: {
      type: String,
      default: "",
    },
    labelVal: {
      type: String,
      required: true,
    },
    inputVal: {
      type: String,
    },
  },
  watch: {
    inputVal(n, o) {
      this.mInputVal = n;
    },
  },
  data() {
    return {
      mInputVal: "",
    };
  },
  computed: {
    // mInputVal: {
    //   get() {
    //     return this.inputVal;
    //   },
    //   set() {},
    // },
  },
  methods: {
    inputChange(e) {
      // console.log();
      this.$emit("valueChange", this.mInputVal);
    },
  },
};
</script>
<style  scoped>
.inputLine {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}
label {
  text-align: right;
  display: inline-block;
  width: 170px;
  color: #878d94;
  letter-spacing: 4px;
  font-size: 16px;
  /* background-color: aquamarine; */
}
input {
  margin-left: 24px;
  padding: 0 8px;
  width: 480px;
  height: 32px;
  background-color: #ffffff;
  border-radius: 4px;
  border: solid 1px #e0e0e0;
  outline: none;
  appearance: none;
}
input:focus {
  outline: none;
}

label.equip_cn_title {
  color: #0050b2;
}
</style>